from nicegui import ui

'''
要使用 NiceGUI，我们需要导入库nicegui。我们将在这里使用nicegui的三个函数

**label()**：使用此函数在 UI 上显示文本

**button()**：此函数用于为 UI 创建可单击的按钮。

**notify()**：底部的弹出窗口将显示此函数中编写的内容。
'''

# ui.label('Welcome to NiceGUI!') #
# ui.button('Click Here', on_click=lambda: ui.notify('Button Pressed'))


'''
**toggle()**：此函数可以生成一个切换框，我们在其中通过包含值到标签的映射的字典值列表传递选项。当用户选择一个选项时，它被保存在toggle变量中。

**radio()**：这类似于 toggle() 函数，但在这里我们可以选择单选选项。

**select()**：此函数生成一个下拉列表以选择特定选项。与上述函数相比，此函数的输入和存储的输出值相同。

**checkbox()**：当用户选中复选框时，checkbox 变量被分配一个布尔值 True。

测试隐藏更改
'''

ui.label('切换 Box')
toggle = ui.toggle([1, 2, 3], value=1)

ui.label('单选 Selection')
radio = ui.radio(["one", "two", "three"], value=1).props('inline')

ui.label('下拉 Select')
select = ui.select(["red", "blue", "green"], value=1)

ui.label('复选 Box')
checkbox = ui.checkbox('check me')
ui.run()



# from nicegui import ui
#
#
# def title(title):
#     ui.label(title).classes('self-center text-5xl/[80%] font-bold m-5').style("font-family:HeiTi")
#
#
# def header(text):
#     with ui.header(elevated=True).classes('w-full bg-primary text-white mt-2'):
#         ui.label(text).classes('fixed-top-right mt-2')
#
#
# def footer(text):
#     with ui.footer().classes('w-full bg-primary text-white mb-2'):
#         ui.label(text).classes('fixed-bottom-right mb-2')
#
#
# def ui_main():
#     header('页眉')
#     title('信息管理系统设置')
#     with ui.grid(columns=2).classes('w-[80%] self-center row'):
#         with ui.tabs().classes('col-2 self-center').props('vertical') as tabs:
#             func0 = ui.tab("func0", label='首页', icon='home').style('color:red')
#             func1 = ui.tab('func1', label='功能一', icon='money').style('color:orange')
#             func2 = ui.tab('func2', label='功能二', icon='devices_other').style('color:black')
#             func3 = ui.tab('func3', label='功能三', icon='api').style('color:green')
#             func4 = ui.tab('func4', label='功能四', icon='apps').style('color:blue')
#         with ui.tab_panels(tabs, value=func0).classes('col self-center'):
#             with ui.tab_panel(func0):
#                 ui.label('基础设置').classes('text-3xl/[80%] font-bold m-2').style("font-family:KaiTi")
#                 with ui.column():
#                     with ui.row():
#                         ui.input(label='打印机使用的纸张ID', value='').classes('text-xl/[80%] m-2').style(
#                             "font-family:FangSong")
#                         ui.button("保存并设置默认纸张ID")
#                     with ui.row():
#                         ui.input(label='当前默认纸张ID', value='').props('disable').classes('text-xl/[80%] m-2').style(
#                             "font-family:FangSong")
#                         ui.button("获取默认纸张ID")
#             with ui.tab_panel(func1):
#                 ui.label('功能一').classes('text-3xl/[80%] font-bold m-2').style("font-family:KaiTi")
#             with ui.tab_panel(func2):
#                 ui.label('功能二').classes('text-3xl/[80%] font-bold m-2').style("font-family:KaiTi")
#             with ui.tab_panel(func3):
#                 ui.label('功能三').classes('text-3xl/[80%] font-bold m-2').style("font-family:KaiTi")
#             with ui.tab_panel(func4):
#                 ui.label('功能四').classes('text-3xl/[80%] font-bold m-2').style("font-family:KaiTi")
#     footer('页脚')
#
#
# ui_main()
# ui.run(reload=False, native=True)


#ui.run()

from nicegui import ui

# 使用Mermaid语法描述组织结构图
mermaid_code = '''
graph TD;
    A[总经理] -->|管理| B[部门经理1];
    A -->|管理| C[部门经理2];
    B -->|负责| D[员工1];
    B -->|负责| E[员工2];
    C -->|负责| F[员工3];
    C -->|负责| G[员工4];

    subgraph A[总经理]
        style A fill:#80aaff,stroke:#ffffff,stroke-width:2px;
    end
    subgraph B[部门经理1]
        style B fill:#80aaff,stroke:#ffffff,stroke-width:2px;
    end
    subgraph C[部门经理2]
        style C fill:#80aaff,stroke:#ffffff,stroke-width:2px;
    end
'''

# 创建Mermaid图表
ui.mermaid(mermaid_code)

# 运行图形用户界面
ui.run()
